<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.box1{
			/* background-color: antiquewhite; */
			border: 1px solid red;
			width: 50px;
			height: 50px;
			display: inline-block;
		}
		.box2{
			/* background-color: antiquewhite; */
			border: 1px solid red;
			width: 50px;
			height: 50px;
			margin: 0 10px;
				display: inline-block;
		}
		.box3{
			/* background-color: antiquewhite; */
			border: 1px solid red;
			width: 50px;
			height: 50px;
				display: inline-block;
		}
		.box4{
			/* background-color: antiquewhite; */
			border: 1px solid red;
			width: 50px;
			height: 50px;
			display: inline-block;
		}
		
		.xz{
			background-color: black;
		}
	</style>
	<body>
		<div class="boxx">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
		</div>
		<div class="box4">全选</div>
		<script>
			
			var boxx=document.querySelectorAll('.boxx div')
			var box4=document.querySelectorAll('.box4')[0]
			// console.log(box4)
			// console.log(boxx)
			var r=0
			var w=0;
			for(let i=0;i<boxx.length;i++){
				
				boxx[i].onclick=function(e){
					e.stopPropagation()
					// this.classListadd('xz')
					// this.style.display='inline-block'
					if (r===0) {
						this.style.width='100px'
						this.style.height='100px'
							r=1			
					} else{
						this.style.width='50px'
						this.style.height='50px'
							r=0;	
					}
					console.log(i)
					
					if(i==1){
						box4.style.width='100px'
						w=1
					}else{
						box4.style.width=''
						w=0
					}
				}
				
		}	
			for(var i=0;i<box4.length;i++){
				box4[i].onclick=function(){
					if (w===0) {
						this.style.width='100px'
						this.style.height='100px'
							w=1	
						 
					} else{
						this.style.width='50px'
						this.style.height='50px'
							w=0;	
					}
					
					
				}
			}
			
			
			
			
		</script>
	</body>
</html>